<template>
  <div class="nav-container">
    <el-card class="box-card">
      <el-header>
        <h2>云算生肖钞配号系统</h2>
      </el-header>
      <div class="main-btn"><el-button type="primary" @click="onEnroll">登记</el-button></div>
      <div class="main-btn"><el-button type="primary" @click="router.push('/number/record')" plain>我的号码</el-button></div>
      <div class="main-btn"><el-button type="primary" @click="router.push('/number/allocation')" plain>我的配号</el-button></div>
      <div class="main-btn"><el-button type="primary" @click="router.push('/number/beautiful')" plain>我的靓号</el-button></div>
      <div class="main-btn"><el-button type="primary" @click="router.push('/number/beautiful/market')" plain>靓号市场</el-button></div>
      <div class="main-btn"><el-button type="primary" @click="router.push('/modify/password')" plain>密码修改</el-button></div>
      <div class="main-btn"><el-button @click="exit" type="primary" plain>退出登录</el-button></div>
    </el-card>
    <div style="display: flex;width: 100vw; margin-top: 12px; height: calc(100% - 474px)">
      <div style="width: 40px"><p>客</p><p>服</p><p>微</p>信</div>
      <div style="height: 100%;">
        <img src="./3.jpg" style="height: 100%; max-height: 30vh; min-height: 150px;width: 50%;float: left" />
        <img src="./1.jpg" style="height: 100%; max-height: 30vh; min-height: 150px;width: 50%;float: left">
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import {logout} from "@/api/login";
import {ElMessage} from "element-plus";
import Cookies from "js-cookie";

const onEnroll = () => {
  router.push('/enroll')
}

const exit = () => {
  logout().then(res =>{
    if (res.code === 200){
      Cookies.remove('token')
      router.push('/login')
      ElMessage.success('退出成功');
    }else {
      ElMessage.error(res.msg);
    }
  })

}

</script>

<style lang="less">
.nav-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  padding: 0 8px;

  .box-card {
    width: 100%;
    height: 430px;
    margin-top: 12px;

    .main-btn {
      margin-bottom: 12px;

      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
